<template>
  <div>
	  <!-- 批量创建创意 -->
    <!-- 加载 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
    <div v-if="spinning ==false">
		<a-row>
			<a-col :span="3">
				<a-steps :current="2"  direction="vertical">
					<a-step>
						<template slot="title">
							广告组
						</template>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongoback">创建场景</p>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongoback">推广目的</p>
					</a-step>
					<a-step disabled>
						<template slot="title">
							广告计划
						</template>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">投放范围</p>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">投放目标</p>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">用户定向</p>
						<p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">预算与出</p>
					</a-step>
					<a-step disabled>
						<template slot="title">
							广告创意
						</template>
						<p slot="description" style="margin-bottom:0;">投放位置</p>
						<p slot="description" style="margin-bottom:0;">制作创意</p>
						<p slot="description" style="margin-bottom:0;">创意分类</p>
					</a-step>
					<a-step disabled>
						<template slot="title">
							批量规则
						</template>
						<p slot="description" style="margin-bottom:0;">批量配置</p>
						<p slot="description" style="margin-bottom:0;">提交规则</p>
					</a-step>
				</a-steps>
			</a-col>
			<a-col :span="20">
				<a-form :form="form">
					<div class="borderbox">
						<div class="code-box-demos" id="origin-position">
							<div class="ad-row-title">
								设置投放位置
							</div>
							<div class="ad-group">
								<a-form-item
									:label="$t('广告位置')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<a-radio-group v-decorator="[
									'a',
									{ rules:[],initialValue: 'smart_inventory'}
									]"
									@change="oninventory" button-style="solid">
										<a-radio-button value="smart_inventory">
											优选广告位
										</a-radio-button>
										<a-radio-button value="inventory_type">
											按媒体指定位置
										</a-radio-button>
						<a-radio-button value="scene_inventory">
											按场景指定位置
										</a-radio-button>
									</a-radio-group>

						<p :class="[inventory =='smart_inventory'?'isblock':'isnone']" class="mfont">
						系统将根据您设置的定向，选择预估效果最好的广告位进行投放，并触达尽可能多的目标用户<span class="spanfont">了解详情</span>
						</p>
						<p :class="[inventory =='inventory_type'?'isblock':'isnone']" class="mfont">
						建议您选择所有可选广告位，否则会减少覆盖，导致广告失去部分优质展示机会
						</p>
						<p :class="[inventory =='scene_inventory'?'isblock':'isnone']" class="mfont">
						系统将结合用户使用场景，智能选择与目标用户场景契合的广告素材进行投放，并获得尽可能优的转化效果
						</p>
								</a-form-item>

					<!-- 媒体指定位置 -->
					<div :class="[inventory =='inventory_type' ? 'isblock':'isnone']" class="mfont">
						<a-table :row-selection="rowmedialist" bordered style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="medialabel" :data-source="medialist">
									</a-table>
					</div>

					<!-- 场景指定位置 -->
					<div :class="[inventory =='scene_inventory' ?'isbolck':'isnone']" class="mfont">
						<a-table :row-selection="rowscenelist" bordered style="width:500px;" selections="true" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="scenelabel" :data-source="scenelist">
									</a-table>
					</div>
							</div>
						</div>
					</div>
					<div class="borderbox">
						<div class="code-box-demos" id="origin-make">
							<div class="ad-row-title">
								制作创意
							</div>
							<div class="ad-group">
								<a-form-item
									v-if="scene ==3"
									:label="$t('创意方式')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<div>
										<a-button type="primary" @click="addoriginality" size="large" :disabled="originality.length >=20">
											添加创意
										</a-button>
										<span style="margin-left:10px;">创意组创意个数 <strong>{{originality.length}}/20</strong></span>
									</div>
								</a-form-item>
								
								<!-- 批量创意盒子 -->
								<div v-for="(iv,nv) in originality" :key="nv">
									<a-form-item
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
										:required="true"
									>
										<span slot="label" v-if="scene !=3">
											创意方式&nbsp;
										</span>
										<div class="mfont" style="margin-top:20px;">
											<a-radio-group v-decorator="[
												iv.creative_material_mode,
												{ rules:[],initialValue: 'NONE'}
											]"
												@change="onmaterial(nv,$event)" button-style="solid">
												<a-radio-button value="STATIC_ASSEMBLE">
													程序化创意
												</a-radio-button>
												<a-radio-button value="NONE">
													自定义创意
												</a-radio-button>
											</a-radio-group>
										</div>
									</a-form-item>
									
									<div class="borderbox mfont">

									<!-- 自定义创意 -->
									<div :class="[iv.material =='NONE' ? 'isblock' :'isnone']">
										<div class="creativeSetup-nav">
											<a-form-item style="margin-bottom:0px;">
											<a-input v-decorator="[
														iv.originname,
														{ rules:[{required: true, message: '长度为1-20个字' }],initialValue:iv.originvalue}
														]" style="width:148px;margin-right:10px;" placeholder="请输入..." />创意个数：<span>{{iv.num.length}}/10</span> 
												<a-icon style="float:right;margin-right:10px;font-size:16px;line-height:40px;cursor:pointer;" @click="origindelete(nv)" v-if="originality.length > 1" type="delete" />
											</a-form-item>
										</div>
											
										<!-- 遍历创意内容 -->
										<div style="margin-top:15px;">
											<div class="btnmonbox mfont">
												<a-badge v-for="(item,index) in iv.paneslist" :key="index" :count="item.content.num">
												<div class="image-mode" @click="oncustom(nv,index+1)" :class="iv.customactive ==index+1 ? 'mode-active':''">
													<img :src="item.img" alt="">
														{{item.title}}
													<div class="bui-icon-question-triangle" v-if="iv.customactive ==index+1"></div>
												</div>
												</a-badge>
											</div>

											<div v-for="(item,index) in iv.paneslist" :key="index">
												<div class="creative-common-entry" v-if="iv.customactive ==index+1">
													<div class="creative-common-entry-1">
														<img :src="imgurl('creative_platform_entry.png')" alt="">
														<p class="creative-common-entry-1-tx-1">创意工作台</p>
														<p class="creative-common-entry-1-tx-2">您的创作</p>
														<p class="creative-common-entry-1-tx-2">制作小助手</p>
														<a href="">立即使用</a>
													</div>
													<div class="creative-common-entry-2">
														<img :src="imgurl('fast-generate-image.svg')" alt="">
														<p class="creative-common-entry-1-tx-2">一键生成大图</p>
													</div>
													<div class="creative-common-entry-2">
														<img :src="imgurl('fast-generate-video.svg')" alt="">
														<p class="creative-common-entry-1-tx-2">一键生成视频</p>
													</div>
												</div>

												<div class="ctt-panel-body-empty" v-if="iv.customactive ==index+1 && item.content.panelshow ==true">
													<div class="creative-none-logo">
														<img :src="imgurl('none.png')" alt="">
													</div>
													
													<p class="panel-box" v-if="iv.num.length <10">
														请为
														<span v-if="iv.customactive ==index+1">
															{{item.title}}
														</span>
														<a-button type="primary" @click="addpanel(nv,index+1)"> <a-icon type="plus" />添加创意</a-button>
													</p>
													<p class="panel-box" v-if="iv.num.length >=10">创意总数已达上限，无法再新增创意</p>
												</div>

												<div class="ctt-panel-box" v-if="iv.customactive == index+1 && item.content.show ==true">
													<div class="ctt-panel-header">
														<div class="tab-list" style="width:930px;max-width:930px;">
															<a-button type="primary" @click="add(nv,index)" :disabled="iv.tabtrue" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
															<a-tabs hide-add type="editable-card" @edit="onEdit($event,nv)" style="min-height:600px;">
																<a-tab-pane v-for="(pane,indsub) in item.content.addpanel" :key="pane.key" :tab="pane.title" :closable="pane.closable">
																	<!-- {{item.content.addpanel}} -->
																		<div style="position:relative">
																			<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
																				<span slot="label">
																					创意内容&nbsp;
																					<!-- <a-tooltip title="What do you want others to call you?">
																					<a-icon type="question-circle-o" />
																					</a-tooltip> -->
																				</span>
																				<div class="form-row">
																					<div class="creative-video-card">
																						<!-- 如果为竖版视频 -->
																						<div v-if="iv.customactive == 1">
																							<div class="creative-video-card-wrapper">
																								<div class="video-card">

																									<div class="card-create-md" style="padding:0;" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.videoUrl" >
																											<div class="videobtn" >
																												<a-button size="small" @click="onvideo(nv,indsub)" :loading="btnloading" type="primary">更换视频</a-button>
																												<a :href="pane.videoUrl" target="_blank"><a-button size="small" @click="pane.videoUrl">视频播放</a-button></a>
																											</div>
																											<video
																											ref="refVideo"
																											width="140"
																											height="250"
																											playsinline="true"
																											type="video/mp4"
																											controls
																											muted
																											:src="pane.videoUrl" />
																										</div>
																										
																										<div v-else style="padding:16px;">
																											<a-upload
																											name="avatar"
																											list-type="picture-card"
																											class="avatar-uploader "
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:1}"
																											:customRequest="customRequest"
																											@change="videoChange(nv,indsub,$event)">

																											<img v-if="pane.videoUrl" :src="pane.videoUrl" alt="avatar" />
																											<div v-else>
																												<a-icon :type="pane.uploadloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传视频</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button">
																												<a-button @click="onvideo(nv,indsub)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																									</div>
																									
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s</p>
																								</div>
																							</div>
																							<!-- 竖图视频弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.videoshow"
																								:confirm-loading="confirmLoading"
																								@ok="videook(nv,indsub)"
																								@cancel="handlevideo(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="我的视频">
																											<a-form :form="forms">
																											<a-space>
																												<!-- 我的视频 -->
																												<a-input-search
																												style="width:200px;"
																												placeholder="可搜索视频名称或ID"
																												enter-button="搜索"
																												@search="sourceserach"
																												/>
																												<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																													<a-select-option value="AD_SITE">
																														本地上传
																													</a-select-option>
																													<a-select-option value="CREATIVE_CENTER">
																														创意中心
																													</a-select-option>
																													<a-select-option value="OPEN_API">
																														开放平台
																													</a-select-option>
																													<a-select-option value="SUPPLIER">
																														即合视频
																													</a-select-option>
																													<a-select-option value="VIDEO_CAPTURE">
																														易拍视频
																													</a-select-option>
																													<a-select-option value="ACCOUNT_PUSH">
																														推送视频
																													</a-select-option>
																													<a-select-option value="STAR">
																														星图视频
																													</a-select-option>
																													<a-select-option value="CEWEBRITY_VIDEO">
																														达人视频
																													</a-select-option>
																													<a-select-option value="OTHERS">
																														其他来源
																													</a-select-option>
																												</a-select>
																												<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																													
																												</a-select>
																											</a-space>
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="videoloding" :data-source="pane.videolist">
																													<a-list-item slot="renderItem" @click="onvideoactive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																														<video
																														ref="refVideo"
																														width="200"
																														height="300"
																														playsinline="true"
																														type="video/mp4"
																														controls
																														muted
																														:src="item.url" />
																														<p>
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																															<span class="videoname">{{item.filename}}</span></p>
																															<div class="activetrue" v-if="pane.videoactive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																										<!-- <p>已选择 {{pane.videonum}}/1:</p> -->
																										</a-form>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传" force-render>
																												<a-upload-dragger
																													name="file"
																													:disabled="pane.videonum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:1}"
																													@change="videoChange(nv,indsub,$event)"
																													:customRequest="modecustomRequest"
																												>
																												<div v-if="pane.videonum ==1">
																													<p>已达视频上传上限{{pane.videonum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.uploadloading ?'loading' : 'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s
																													</p>
																												</div>
																												</a-upload-dragger>
																											<!-- <p>已选择：{{pane.videonum}}/1</p> -->
																											
																										</a-tab-pane>
																										</a-tabs>
																								</div>
																							</a-modal>

																							<div class="creative-video-card-wrapper">
																								<div class="video-card">
																									<div class="card-create-md" style="padding:0;" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.imageUrl" >
																											<div class="videobtn" style="top:95px;">
																												<a-button size="small" @click="onvideocover(nv,indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="pane.imageUrl" style="width:100%;height:250px" alt="">
																										</div>
																										<div v-else style="padding:16px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											]"
																											name="avatar"
																											list-type="picture-card"
																											class="avatar-uploader"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																											:customRequest="customRequest"
																											@change="coverChange(nv,indsub,$event)">

																											<img v-if="pane.imageUrl" :src="pane.imageUrl" alt="avatar" />
																											<div v-else>
																												<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传封面</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button">
																												<a-button @click="onvideocover(nv,indsub)" :loading="btnloading">生成/选择封面</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
																								</div>
																							</div>

																							<!-- 封面图弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.covershow"
																								:confirm-loading="confirmLoading"
																								@ok="videocoverok(nv,indsub)"
																								@cancel="handlecover(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="onvideocoveractive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																															<!-- <p><span class="videoname">{{item.id}}</span></p> -->

																															<div class="activetrues" v-if="pane.coveractive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
		<!-- 																													
																															<div class="activetrue" v-if="pane.videoactive ==item.id">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div> -->
																													</a-list-item>
																												</a-list>
																											</div>
																											<!-- <p>已选择 {{pane.covernum}}/1:</p> -->
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="pane.covernum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																													@change="coverChange(nv,indsub,$event)"
																													:customRequest="modecustomRequest"
																												>
																												<div v-if="pane.covernum ==1">
																													<p>已达封面图上传上限{{pane.covernum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比9:16，720*1280≤尺寸≤1440*2560，支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																						<!-- 横板视频 -->
																						<div v-else-if="iv.customactive == 2">
																							<div class="creative-video-card-wrapper">
																								<div class="video-card">

																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.videoUrl" >
																											<div class="videobtn" >
																												<a-button size="small" @click="onvideo(nv,indsub)" :loading="btnloading" type="primary">更换视频</a-button>
																												<a :href="pane.videoUrl" target="_blank"><a-button size="small" @click="pane.videoUrl">视频播放</a-button></a>
																											</div>
																											<video
																											ref="refVideo"
																											width="250"
																											height="140"
																											playsinline="true"
																											type="video/mp4"
																											controls
																											muted
																											:src="pane.videoUrl" />
																										</div>
																										
																										<div v-else style="padding:12px;">
																											<a-upload
																											name="avatar"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:1}"
																											:customRequest="customRequest"
																											@change="videoChange(nv,indsub,$event)">

																											<img v-if="pane.videoUrl" :src="pane.videoUrl" alt="avatar" />
																											<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;sursor:pointer;">
																												<a-icon :type="pane.uploadloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传视频</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button" style="text-align:center;">
																												<a-button @click="onvideo(nv,indsub)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																									</div>
																									
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">宽高比16:9,视频码率≥516kbps,大小≤1000M,分辨率≥1280*720,时长≥4s</p>
																								</div>
																							</div>
																							<!-- 竖图视频弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.videoshow"
																								:confirm-loading="confirmLoading"
																								@ok="videook(nv,indsub)"
																								@cancel="handlevideo(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="我的视频">
																											<a-form :form="forms">
																											<a-space>
																												<!-- 我的视频 -->
																												<a-input-search
																												style="width:200px;"
																												placeholder="可搜索视频名称或ID"
																												enter-button="搜索"
																												@search="sourceserach"
																												/>

																												<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																													<a-select-option value="AD_SITE">
																														本地上传
																													</a-select-option>
																													<a-select-option value="CREATIVE_CENTER">
																														创意中心
																													</a-select-option>
																													<a-select-option value="OPEN_API">
																														开放平台
																													</a-select-option>
																													<a-select-option value="SUPPLIER">
																														即合视频
																													</a-select-option>
																													<a-select-option value="VIDEO_CAPTURE">
																														易拍视频
																													</a-select-option>
																													<a-select-option value="ACCOUNT_PUSH">
																														推送视频
																													</a-select-option>
																													<a-select-option value="STAR">
																														星图视频
																													</a-select-option>
																													<a-select-option value="CEWEBRITY_VIDEO">
																														达人视频
																													</a-select-option>
																													<a-select-option value="OTHERS">
																														其他来源
																													</a-select-option>
																												</a-select>
																												<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																													
																												</a-select>
																											</a-space>
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.videolist">
																													<a-list-item slot="renderItem" @click="onvideoactive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																														<video
																														ref="refVideo"
																														width="200"
																														height="300"
																														playsinline="true"
																														type="video/mp4"
																														controls
																														muted
																														:src="item.url" />
																														<p>
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																															<span class="videoname">{{item.filename}}</span></p>
																															<div class="activetrue" v-if="pane.videoactive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																										<!-- <p>已选择 {{pane.videonum}}/1:</p> -->
																										</a-form>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传" force-render>
																												<a-upload-dragger
																													name="file"
																													:disabled="pane.videonum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:1}"
																													:customRequest="modecustomRequest"
																													@change="videoChange(nv,indsub,$event)"
																												>
																												<div v-if="pane.videonum ==1">
																													<p>已达视频上传上限{{pane.videonum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.uploadloading ? 'loading' : 'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														宽高比16:9,视频码率≥516kbps,大小≤1000M,分辨率≥1280*720,时长≥4s
																													</p>
																												</div>
																												</a-upload-dragger>
																											<!-- <p>已选择：{{pane.videonum}}/1</p> -->
																											
																										</a-tab-pane>
																										</a-tabs>
																								</div>
																							</a-modal>

																							<div class="creative-video-card-wrapper">
																								<div class="video-card">
																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.imageUrl" >
																											<div class="videobtn" style="top:50px;left:90px;">
																												<a-button size="small" @click="onvideocover(nv,indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																										</div>
																										<div v-else style="padding:12px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											
																											]"
																											name="avatar"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																											:customRequest="customRequest"
																											@change="coverChange(nv,indsub,$event)">

																											<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																											<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;sursor:pointer;">
																												<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传封面</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button" style="text-align:center">
																												<a-button @click="onvideocover(nv,indsub)" :loading="btnloading">生成/选择封面</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
																								</div>
																							</div>

																							<!-- 封面图弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.covershow"
																								:confirm-loading="confirmLoading"
																								@ok="videocoverok(nv,indsub)"
																								@cancel="handlecover(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 3 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="onvideocoveractive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;height:290px;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																															<div class="activetrues" v-if="pane.coveractive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																											<p>已选择 {{pane.covernum}}/1:</p>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="pane.covernum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																													:customRequest="modecustomRequest"
																													@change="coverChange(nv,indsub,$event)"
																												>
																												<div v-if="pane.covernum ==1">
																													<p>已达封面图上传上限{{pane.covernum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.imgloading ? 'loading' :'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																						<!-- 大图横图 -->
																						<div v-else-if="iv.customactive == 3">
																							<div class="creative-video-card-wrapper">
																								<div class="video-card">
																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.imageUrl" >
																											<div class="videobtn" style="top:95px;">
																												<a-button size="small" @click="oncover(nv,indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																										</div>
																										<div v-else style="padding:12px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											]"
																											name="avatar"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																											:customRequest="customRequest"
																											@change="coverChange(nv,indsub,$event)">

																											<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																											<div v-else style="width:224px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																												<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传图片</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button" style="text-align:center">
																												<a-button @click="oncover(nv,indsub)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
																								</div>
																							</div>

																							<!-- 封面图弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.covershow"
																								:confirm-loading="confirmLoading"
																								@ok="coverok(nv,indsub)"
																								@cancel="handlecover(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="oncoveractive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																															<div class="activetrues" v-if="pane.coveractive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																											<p>已选择 {{pane.covernum}}/1:</p>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="pane.covernum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																													:customRequest="modecustomRequest"
																													@change="coverChange(nv,indsub,$event)"
																												>
																												<div v-if="pane.covernum ==1">
																													<p>已达封面图上传上限{{pane.covernum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.imgloading ? 'loading' :'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																						<!-- 组图 -->
																						<div v-else-if="iv.customactive == 4">
																							
																							<div class="creative-video-card-wrapper" v-for="(ivs,nvs) in pane.group" :key="nvs" style="margin-right:5px;">
																								<div class="video-card">
																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="ivs.img" >
																											<div class="videobtn" style="top:50px;left:50px;">
																												<a-button size="small" @click="oncoverGroup(nv,indsub,nvs)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="ivs.img" style="width:100%;height:140px" alt="">
																										</div>
																										<div v-else style="padding:12px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											]"
																											name="avatar"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2,group:nvs}"
																											:customRequest="customRequest"
																											@change="covergroupChange(nv,indsub,nvs,$event)">

																											<img v-if="ivs.img" :src="ivs.img" style="width:100%;height:140px" alt="avatar" />
																											<div v-else style="width:152px;height:45px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																												<!-- <a-icon type="cloud-upload" /> -->
																												<a-icon :type="ivs.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p>上传图片（必填）</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button" style="text-align:center">
																												<a-button @click="oncoverGroup(nv,indsub,nvs)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<!-- <p class="card-create-mdp">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p> -->
																								</div>
																							</div>

																							<p class="card-create-mdp mfont">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p>
																							
																							<!-- 封面图弹窗 -->
																							<a-modal
																							v-for="(ivs,nvs) in pane.group" :key="nvs"
																								title=""
																								:visible="ivs.showis"
																								:confirm-loading="confirmLoading"
																								@ok="coverokGroup(nv,indsub,nvs)"
																								@cancel="handlecoverGroup(nv,indsub,nvs)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="oncoveractiveGroup(nv,indsub,item,nvs)" style="cursor:pointer;" :class="[ivs.activeimg ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[ivs.activeimg ==item ? 'imgactive' :'']" style="width:100%;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																														
																															<div class="activetrues" v-if="ivs.activeimg ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																											<p>已选择 {{ivs.nums}}/1:</p>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="ivs.nums ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2,group:nvs}"
																													:customRequest="modecustomRequest"
																													@change="covergroupChange(nv,indsub,nvs,$event)"
																												>
																												<div v-if="ivs.nums ==1">
																													<p>已达封面图上传上限</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="ivs.imgloading ?'loading' :'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																						<!-- 小图 -->
																						<div v-else-if="iv.customactive == 5">
																							<div class="creative-video-card-wrapper">
																								<div class="video-card">
																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.imageUrl" >
																											<div class="videobtn" style="top:95px;">
																												<a-button size="small" @click="oncover(nv,indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="pane.imageUrl" style="width:100%;height:140px" alt="">
																										</div>
																										<div v-else style="padding:12px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											]"
																											name="avatar"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																											:customRequest="customRequest"
																											@change="coverChange(nv,indsub,$event)">

																											<img v-if="pane.imageUrl" :src="pane.imageUrl" style="width:100%;height:140px" alt="avatar" />
																											<div v-else style="width:206px;height:68px;background-color: #F8F8F8;border: 1px dashed #D6D6D6;text-align:center;">
																												<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传图片</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button" style="text-align:center">
																												<a-button @click="oncover(nv,indsub)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比1.52,456*300≤尺寸≤1368*900,支持JPG、PNG等图片格式</p>
																								</div>
																							</div>

																							<!-- 封面图弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.covershow"
																								:confirm-loading="confirmLoading"
																								@ok="coverok(nv,indsub)"
																								@cancel="handlecover(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="oncoveractive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="width:100%;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																														
																															<div class="activetrues" v-if="pane.coveractive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																											<p>已选择 {{pane.covernum}}/1:</p>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="pane.covernum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																													:customRequest="modecustomRequest"
																													@change="coverChange(nv,indsub,$event)"
																												>
																												<div v-if="pane.covernum ==1">
																													<p>已达封面图上传上限{{pane.covernum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.imgloading ?'loading' : 'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比1.52，456*300≤尺寸≤1368*900，支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																						<!-- 大图竖图 -->
																						<div v-else-if="iv.customactive ==6">
																							<div class="creative-video-card-wrapper">
																								<div class="video-card">
																									<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																										<div class="videomodel" v-if="pane.imageUrl" >
																											<div class="videobtn" style="top:95px;">
																												<a-button size="small" @click="oncover(nv,indsub)" :loading="btnloading" type="primary">更换图片</a-button>
																											</div>
																											<img :src="pane.imageUrl" style="width:100%;height:250px" alt="">
																										</div>
																										<div v-else style="padding:12px;">
																											<a-upload
																											v-decorator="[
																											'upload',
																											]"
																											name="avatar"
																											list-type="picture-card"
																											class="avatar-uploader"
																											:show-upload-list="false"
																											:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																											:customRequest="customRequest"
																											@change="coverChange(nv,indsub,$event)">

																											<img v-if="pane.imageUrl" :src="pane.imageUrl" alt="avatar" />
																											<div v-else>
																												<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																												<div class="ant-upload-text">
																													<p style="font-size:12px;">（必填）</p>
																													<p>上传图片</p>
																												</div>
																											</div>
																											</a-upload>
																											<div class="card-create-button">
																												<a-button @click="oncover(nv,indsub)" :loading="btnloading">素材库</a-button>
																											</div>
																										</div>
																											
																									</div>
																									<p class="card-create-mdp" :style="{width:item.content.width+'px'}">建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
																								</div>
																							</div>

																							<!-- 封面图弹窗 -->
																							<a-modal
																								title=""
																								:visible="pane.covershow"
																								:confirm-loading="confirmLoading"
																								@ok="coverok(nv,indsub)"
																								@cancel="handlecover(nv,indsub)"
																								:width="900"
																								>
																								<div class="material">
																									<a-tabs default-active-key="1" @change="callback">
																										<a-tab-pane key="1" tab="图片素材">
																											<div style="margin-top:12px;height:430px;overflow:auto;">
																												<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="pane.coverlist">
																													<a-list-item slot="renderItem" @click="oncoveractive(nv,indsub,item)" style="cursor:pointer;" :class="[pane.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																														<img :src="item.url" :class="[pane.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																														<!-- <p> -->
																															<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																														
																															<div class="activetrues" v-if="pane.coveractive ==item">
																																<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																															</div>
																													</a-list-item>
																												</a-list>
																											</div>
																											<p>已选择 {{pane.covernum}}/1:</p>
																										</a-tab-pane>
																										<a-tab-pane key="2" tab="本地上传">
																											<a-upload-dragger
																													name="file"
																													:disabled="pane.covernum ==1"
																													:multiple="true"
																													:data="{n:nv,index:indsub,sub:iv.customactive,uptype:2}"
																													@change="coverChange(nv,indsub,$event)"
																													:customRequest="modecustomRequest"
																												>
																												<div v-if="pane.covernum ==1">
																													<p>已达封面图上传上限{{pane.covernum}}</p>
																												</div>
																												<div v-else>
																													<p class="ant-upload-drag-icon">
																													<a-icon :type="pane.imgloading ? 'loading' : 'cloud-upload'" />
																													</p>
																													<p class="ant-upload-text">
																														将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																													</p>
																													<p class="ant-upload-hint">
																														建议最佳：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式
																													</p>
																												</div>
																											</a-upload-dragger>
																										</a-tab-pane>
																									</a-tabs>
																								</div>
																							</a-modal>
																						</div>
																					</div>
																				</div>
																			</a-form-item>

																			<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
																				<span slot="label">
																					创意标题&nbsp;
																				</span>
																				<div class="form-row">

																					<a-input type="textarea" :ref="'nametitle'+nv" placeholder="请输入标题或使用系统推荐标题" v-decorator="[
																					pane.input+nv,
																					{
																						rules: [{required: true, message: '请输入创意标题'}],
																						initialValue: pane.nametitle
																					}
																					]" @change="ontitle(nv,indsub,$event,pane.input)" maxLength="30" style="width:430px;" />

																					<!-- <input type="text"> -->

																					<!-- <a-input v-model="pane.input" @change="ontitle(nv,indsub,$event)" /> -->

																					<p class="dynamicp mfont">插入动态词包：
																						<a href="javascript:void(0);" @click="ondynamic('{地点}',nv,indsub,4)">+地点</a><a href="javascript:void(0);" @click="ondynamic('{日期}',nv,indsub,1727)">+日期</a><a href="javascript:void(0);" @click="ondynamic('{星期}',nv,indsub,1736)">+星期</a><a href="javascript:void(0);" @click="ondynamic('{年龄}',nv,indsub,1737)">+年龄</a> 
																						<span style="cursor:pointer;" @click="ondynamicmore(nv,indsub)">更多</span>
																					</p>
																				</div>
																			</a-form-item>

																			<a-modal
																				title=""
																				:visible="pane.dynamicmore"
																				:confirm-loading="confirmLoading"
																				:width="800"
																				:maskClosable="true"
																				:footer="null"
																				@cancel="onhandlecover(nv,indsub)"
																			>
																				<a-table :scroll="{ x: 400, y: 300 }" :pagination="pages" :loading="dynamicloding" :columns="dynamiclabel" :data-source="pane.dynamiclist">
																					<!-- 动态词状态 -->
																					<div slot="statusDemo" slot-scope="text">
																						<span v-if="text == 'CREATIVE_WORD_STATUS_APPROVE'">
																							审核通过
																						</span>
																						<span v-else-if="text =='CREATIVE_WORD_STATUS_REJECT'">
																							审核失败
																						</span>
																						<span v-else-if="text =='CREATIVE_WORD_STATUS_AUDIT'">
																							新建审核中
																						</span>
																						<span v-else-if="text == 'CREATIVE_WORD_STATUS_REAUDIT'">
																							修改审核中
																						</span>
																					</div>

																					<div slot="action" slot-scope="text">
																						<a href="javascript:void(0);" @click="ondynamic('{'+text.name+'}',nv,indsub,text.creative_word_id)">插入</a>
																					</div>

																				</a-table>
																			</a-modal>
																			<div v-if="index == 0 || index ==1">
																				<a-form-item :labelCol="{span: 3}" :wrapperCol="{span: 200}">
																					<span slot="label">
																						同步状态&nbsp;
																					</span>
																					<div class="form-row">
																						<a-checkbox @change="onChange" v-decorator="[pane.derive_poster_cid]">
																							将该视频的封面和标题同步到图片创意
																						</a-checkbox>
																						<a-tooltip title="勾选后，在创建完视频创意后，在计划下同步新建图片创意">
																							<a-icon type="question-circle-o" />
																						</a-tooltip>
																					</div>
																				</a-form-item>
																			</div>

																			<!-- 创意预览 -->
																			<div class="creative-preview-box">
																				<div class="creative-preview">
																					<div class="title">创意预览</div>
																					<a-tabs default-active-key="1" :tabBarGutter="1" @change="callback">
																						<a-tab-pane key="1" tab="抖音" style="margin:0 !important;">
																							<div class="preview">
																								<img :src="imgurl('5.png')" style="width:100%;" alt="">
																								<div class="douyin-bk">
																									<img class="oneimg" :src="imgurl('headimg.jpg')" alt="">
																									<img class="twoimg" :src="imgurl('aweme_plus_icon.png')" alt="">
																								</div>
																								<div class="douyin-title">
																									{{item.content.addpanel[indsub].nametitle}}
																								</div>
																							</div>
																						</a-tab-pane>
																						<a-tab-pane key="2" tab="头条" style="margin:0 !important;">
																							<div class="preview">
																								<img :src="imgurl('15.png')" style="width:100%;" alt="">
																								<div class="container">
																									<div>
																										<img :src="imgurl('headimg.jpg')" alt="">
																									</div>
																									<div class="cibtauberbutton">
																										<a-space>
																											<a-button size="small">查看详情</a-button>
																											<a-button type="danger" size="small"><a-icon type="download" /> 立即下载</a-button>
																										</a-space>
																									</div>
																								</div>
																							</div>
																						</a-tab-pane>
																						<a-tab-pane key="3" tab="西瓜" style="margin:0 !important;">
																							<div class="preview">
																								<img :src="imgurl('15.png')" style="width:100%;" alt="">
																							</div>
																							<div class="container">
																								<div>
																									<img :src="imgurl('headimg.jpg')" alt="">
																								</div>
																								<div class="cibtauberbutton">
																									<a-space>
																										<a-button type="primary" style="width:160px;" size="small"><a-icon type="download" /> 立即下载</a-button>
																									</a-space>
																								</div>
																							</div>
																						</a-tab-pane>
																						<a-tab-pane key="4" tab="抖音火山版" style="margin:0 !important;">
																							<div class="preview">
																								<img :src="imgurl('3.png')" style="width:100%;" alt="">
																							</div>
																						</a-tab-pane>
																					</a-tabs>
																				</div>
																			</div>
																		</div>
																</a-tab-pane>
															</a-tabs>								
														</div>
													</div>
												</div>
											</div>
													
										</div>
									</div>

									<!-- 程序化创意 -->
									<div :class="[iv.material =='STATIC_ASSEMBLE' ? 'isblock' :'isnone']">

									<div :class="[source =='0' ? 'isblock' :'isnone']">
										<div class="creativeSetup-nav">
										<a-form-item style="margin-bottom:0px;">
										<a-input v-decorator="[
														iv.originname,
														{ rules:[{required: true, message: '长度为1-20个字' }],initialValue:iv.originvalue}
														]" style="width:148px;margin-right:10px;" placeholder="请输入..." />
											<!-- <div class="form-row">
												已选广告位：
												<span v-if="inventory =='smart_inventory'">优选广告位</span>
												<span v-else-if="inventory =='inventory_type'" v-for="item in mediaboxlist" :key="item.key">
													{{item.name}}
												</span>
												<span v-else-if="inventory =='scene_inventory'" v-for="item in cenelistbox" :key="item.key">
													场景广告位-{{item.name}}
												</span>
											</div> -->
											<!-- <p class="mfont"> -->
												图片创意个数：<span style="font-weight:700;margin-right:12px;">{{iv.imagenums.length}}/12</span>&nbsp;&nbsp;  视频创意个数：<span style="font-weight:700">{{iv.videonums.length}}/10</span>
												<a-icon style="float:right;margin-right:10px;font-size:16px;line-height:40px;cursor:pointer;" @click="origindelete(nv)" v-if="originality.length > 1" type="delete" />
											<!-- </p> -->
										</a-form-item>
										</div>
										
											
										<!-- 遍历创意内容 -->
										<div style="margin-top:20px;">
											<div class="btnmonbox mfont">
												<a-badge v-for="(item,index) in iv.customlist" :key="index" :count="item.content.num">
												<div class="image-mode" @click="oncustoms(nv,index+1)"  :class="iv.progractive ==index+1 ? 'mode-active':''">
													<img :src="item.img" alt="">
														{{item.title}}
													<div class="bui-icon-question-triangle" v-if="iv.progractive ==index+1"></div>
												</div>
												</a-badge>
											</div>

											<div v-for="(item,index) in iv.customlist" :key="index">
												<div class="creative-common-entry" v-if="iv.progractive ==index+1">
													<div class="creative-common-entry-1">
														<img :src="imgurl('creative_platform_entry.png')" alt="">
														<p class="creative-common-entry-1-tx-1">创意工作台</p>
														<p class="creative-common-entry-1-tx-2">您的创作</p>
														<p class="creative-common-entry-1-tx-2">制作小助手</p>
														<a href="">立即使用</a>
													</div>
													<div class="creative-common-entry-2">
														<img :src="imgurl('fast-generate-image.svg')" alt="">
														<p class="creative-common-entry-1-tx-2">一键生成大图</p>
													</div>
													<div class="creative-common-entry-2">
														<img :src="imgurl('fast-generate-video.svg')" alt="">
														<p class="creative-common-entry-1-tx-2">一键生成视频</p>
													</div>
												</div>
												<div class="ctt-panel-body-empty" v-if="iv.progractive ==index+1 && item.content.panelshow ==true">
													<div class="creative-none-logo">
														<img :src="imgurl('none.png')" alt="">
													</div>

													<div v-if="index ==0 || index ==1">
														<p class="panel-box" v-if="iv.videonums.length <10">
															请为
															<span v-if="iv.progractive ==index+1">
																{{item.title}}
															</span>
															<a-button type="primary" @click="addparogr(nv,index+1)"> <a-icon type="plus" />添加创意</a-button>
														</p>
														<p class="panel-box" v-if="iv.videonums.length >=10">创意总数已达上限，无法再新增创意</p>
													</div>
													<div v-else>
														<p class="panel-box" v-if="iv.imagenums.length <12">
															请为
															<span v-if="iv.progractive ==index+1">
																{{item.title}}
															</span>
															<a-button type="primary" @click="addparogr(nv,index+1)"> <a-icon type="plus" />添加创意</a-button>
														</p>
														<p class="panel-box" v-if="iv.imagenums.length >=12">创意总数已达上限，无法再新增创意</p>
													</div>
												</div>

												<div class="ctt-panel-box" v-if="iv.progractive == index+1 && item.content.show ==true">
													<div class="ctt-panel-header">
														<div class="tab-list" style="width:950px;max-width:950px;">
															<div v-if="index ==0 || index ==1">
																<a-button type="primary" @click="addpush(nv,index)" :disabled="iv.tabvideo" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
															</div>
															<div v-else>
																<a-button type="primary" @click="addpush(nv,index)" :disabled="iv.tabimage" style="margin-bottom:10px;"> <a-icon type="plus" />添加创意</a-button>
															</div>
															<div style="position:relative;max-height: 600px;overflow-y: auto;">
																<div class="form-row form-row-label" style="margin-top:10px;" v-for="(ivs,nvs) in item.content.addpanel" :key="nvs">
																	<div class="creative-video-card">
																		<div class="creative-video-card-wrapper">
																			<div v-if="index ==0 || index ==1">
																				<div class="video-card cardbox" style="display:inline-block;">
																					<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																						<div class="videomodel" v-if="ivs.videoUrl" >
																							<div class="videobtn"  style="left:0;">
																								<a-button size="small" @click="metavideo(nv,nvs)" :loading="btnloading" type="primary">更换视频</a-button>
																								<a :href="ivs.videoUrl" style="margin-tp:10px;" target="_blank"><a-button style="margin-top:20px;" size="small" @click="ivs.videoUrl">视频播放</a-button></a>
																							</div>
																							<video
																							ref="refVideo"
																							playsinline="true"
																							type="video/mp4"
																							controls
																							muted
																							:style="index ==0? 'width:100%;height:250px;' : index ==1 ? 'width:100%;height:140px;': index ==2 ? 'width:100%;height:140px;' :index ==3 ? 'width:100%;height:140px;':index ==4 ? 'width:100%;height:250px;':''"
																							:src="ivs.videoUrl" />
																						</div>
																						<div v-else style="padding:12px;">
																							<a-upload
																							name="avatar"
																							:show-upload-list="false"
																							:data="{n:nv,index:nvs,sub:iv.progractive,uptype:1}"
																							:customRequest="paogrRequest"
																							@change="videoChanges(nv,nvs,$event)">

																							<div class="vediobox" :style="index ==0? 'width:114px;height:100px;' : index ==1 ? 'width:226px;height:68px;': index ==2 ? 'width:226px;height:68px;' :index ==3 ? 'width:206px;height:68px;':index ==4 ? 'width:114px;height:100px;':''">
																								<a-icon :type="ivs.uploadloading ? 'loading': 'cloud-upload'" />
																								<p class="upload-area-text" style="font-size:12px;">上传视频</p>
																								<p>(必填)</p>
																							</div>
																							</a-upload>
																							<div class="card-create-button" style="text-align:center;">
																								<a-button @click="metavideo(nv,nvs)" :loading="btnloading">素材库</a-button>
																							</div>
																						</div>
																					</div>
																				</div>

																			<!-- 视频弹窗 -->
																				<a-modal
																					title=""
																					:visible="ivs.videoshow"
																					:confirm-loading="confirmLoading"
																					@ok="videooks(nv,nvs)"
																					@cancel="handlevideos(nv,nvs)"
																					:width="900"
																					>
																					<div class="material">
																						<a-tabs default-active-key="1" @change="callback">
																							<a-tab-pane key="1" tab="我的视频">
																								<a-form :form="forms">
																								<a-space>
																									<!-- 我的视频 -->
																									<a-input-search
																									style="width:200px;"
																									placeholder="可搜索视频名称或ID"
																									enter-button="搜索"
																									@search="sourceserach"
																									/>

																									<a-select name="source" style="width: 120px" placeholder="全部来源" @change="onallsource">
																										<a-select-option value="AD_SITE">
																											本地上传
																										</a-select-option>
																										<a-select-option value="CREATIVE_CENTER">
																											创意中心
																										</a-select-option>
																										<a-select-option value="OPEN_API">
																											开放平台
																										</a-select-option>
																										<a-select-option value="SUPPLIER">
																											即合视频
																										</a-select-option>
																										<a-select-option value="VIDEO_CAPTURE">
																											易拍视频
																										</a-select-option>
																										<a-select-option value="ACCOUNT_PUSH">
																											推送视频
																										</a-select-option>
																										<a-select-option value="STAR">
																											星图视频
																										</a-select-option>
																										<a-select-option value="CEWEBRITY_VIDEO">
																											达人视频
																										</a-select-option>
																										<a-select-option value="OTHERS">
																											其他来源
																										</a-select-option>
																									</a-select>
																									<a-select style="width: 120px" placeholder="全部标签" @change="onlabel">
																										
																									</a-select>
																								</a-space>
																								<div style="margin-top:12px;height:430px;overflow:auto;">
																									<a-list :grid="{ gutter: 16, column: 4 }" :loading="videoloding" :data-source="ivs.videolist">
																										<a-list-item slot="renderItem" @click="onvideoactives(nv,nvs,item)" style="cursor:pointer;" :class="[ivs.videoactive ==item ? 'videoactive' :'']"  slot-scope="item">
																											<video
																											ref="refVideo"
																											width="200"
																											height="300"
																											playsinline="true"
																											type="video/mp4"
																											controls
																											muted
																											:src="item.url" />
																											<p>
																												<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																												<span class="videoname">{{item.filename}}</span></p>
																												<div class="activetrue" v-if="ivs.videoactive ==item">
																													<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																												</div>
																										</a-list-item>
																									</a-list>
																								</div>
																							<!-- <p>已选择 {{ivs.videonum}}/1:</p> -->
																							</a-form>
																							</a-tab-pane>
																							<a-tab-pane key="2" tab="本地上传" force-render>
																									<a-upload-dragger
																										name="file"
																										:disabled="ivs.videonum ==1"
																										:multiple="true"
																										:data="{n:nv,index:nvs,sub:iv.progractive,uptype:1}"
																										@change="videoChanges(nv,nvs,$event)"
																										:customRequest="modepaogrRequest"
																									>
																									<div v-if="ivs.videonum ==1">
																										<p>已达视频上传上限{{ivs.videonum}}</p>
																									</div>
																									<div v-else>
																										<p class="ant-upload-drag-icon">
																										<a-icon :type="ivs.uploadloading ?'loading' : 'cloud-upload'" />
																										</p>
																										<p class="ant-upload-text">
																											将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																										</p>
																										<p class="ant-upload-hint">
																											宽高比9:16,视频码率≥516kbps,大小≤100M,分辨率≥720*1280,时长≥4s
																										</p>
																									</div>
																									</a-upload-dragger>
																								<p>已选择：{{ivs.videonum}}/1</p>
																								
																							</a-tab-pane>
																							</a-tabs>
																					</div>
																				</a-modal>

																				
																			<div class="video-card cardbox" style="display:inline-block;">
																				<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																					<div class="videomodel" v-if="ivs.imageUrl" >
																						<div class="videobtn" :style="index ==0 ? 'top:95px;' : index ==1 ? 'top:50px;left:90px;' :'top:50px;left:90px;'">
																							<a-button size="small" @click="metavideoimage(nv,nvs)" :loading="btnloading" type="primary">更换图片</a-button>
																						</div>
																						<img :src="ivs.imageUrl" :style="index ==0? 'width:100%;height:250px;' : index ==1 ? 'width:100%;height:140px;': index ==2 ? 'width:100%;height:140px;' :index ==3 ? 'width:100%;height:140px;':index ==4 ? 'width:100%;height:250px;':''" alt="">
																					</div>
																					<div v-else style="padding:12px;">
																						<a-upload
																							:show-upload-list="false"
																							:data="{n:nv,index:nvs,sub:iv.progractive,uptype:2}"
																							:customRequest="paogrRequest"
																							@change="coverChanges(nv,nvs,$event)">
																						<div class="vediobox" :style="index ==0? 'width:114px;height:100px;' : index ==1 ? 'width:226px;height:68px;': index ==2 ? 'width:226px;height:68px;' :index ==3 ? 'width:206px;height:68px;':index ==4 ? 'width:114px;height:100px;':''">
																							<a-icon :type="ivs.imgloading ? 'loading': 'cloud-upload'" />
																							<p class="upload-area-text" style="font-size:12px;">上传封面</p>
																							<p>(必填)</p>
																						</div>
																						</a-upload>
																						<div class="card-create-button" style="text-align:center;">
																							<a-button @click="metavideoimage(nv,nvs)" :loading="btnloading">生成/选择封面</a-button>
																						</div>
																					</div>
																				</div>
																			</div>

																			<!-- 图片弹窗 -->
																			<a-modal
																				title=""
																				:visible="ivs.covershow"
																				:confirm-loading="confirmLoading"
																				@ok="videocoveroks(nv,nvs)"
																				@cancel="handlecovers(nv,nvs)"
																				:width="900"
																				>
																				<div class="material">
																					<a-tabs default-active-key="1" @change="callback">
																						<a-tab-pane key="1" tab="图片素材">
																							<div style="margin-top:12px;height:430px;overflow:auto;">
																								<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="ivs.coverlist">
																									<a-list-item slot="renderItem" @click="onvideocoveractives(nv,nvs,item)" style="cursor:pointer;" :class="[ivs.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																										<img :src="item.url" :class="[ivs.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																										<!-- <p> -->
																											<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																										
																											<div class="activetrues" v-if="ivs.coveractive ==item">
																												<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																											</div>
																									</a-list-item>
																								</a-list>
																							</div>
																							<!-- <p>已选择 {{ivs.covernum}}/1:</p> -->
																						</a-tab-pane>
																						<a-tab-pane key="2" tab="本地上传">
																							<a-upload-dragger
																									name="file"
																									:disabled="ivs.covernum ==1"
																									:multiple="true"
																									:data="{n:nv,index:nvs,sub:iv.progractive,uptype:2}"
																									@change="coverChanges(nv,nvs,$event)"
																									:customRequest="modepaogrRequest"
																								>
																								<div v-if="ivs.covernum ==1">
																									<p>已达封面图上传上限{{ivs.covernum}}</p>
																								</div>
																								<div v-else>
																									<p class="ant-upload-drag-icon">
																									<a-icon :type="ivs.imgloading ?'loading' : 'cloud-upload'" />
																									</p>
																									<p class="ant-upload-text">
																										将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																									</p>
																									<p class="ant-upload-hint">
																										建议最佳：宽高比9:16，720*1280≤尺寸≤1440*2560，支持JPG、PNG等图片格式
																									</p>
																								</div>
																							</a-upload-dragger>
																						</a-tab-pane>
																					</a-tabs>
																				</div>
																			</a-modal>

																			</div>
																			<div v-else>
																				<div class="video-card cardbox" style="display:inline-block;">
																					<div class="card-create-md" :style="{width:item.content.width+'px',height:item.content.height+'px'}">
																						<div class="videomodel" v-if="ivs.imageUrl" >
																							<div class="videobtn" :style="index ==0 ? 'top:95px;' : index ==1 ? 'top:50px;left:90px;' :'top:50px;left:90px;'">
																								<a-button size="small" @click="metaimage(nv,nvs)" :loading="btnloading" type="primary">更换图片</a-button>
																							</div>
																							<img :src="ivs.imageUrl" :style="index ==0? 'width:100%;height:250px;' : index ==1 ? 'width:100%;height:140px;': index ==2 ? 'width:100%;height:140px;' :index ==3 ? 'width:100%;height:140px;':index ==4 ? 'width:100%;height:250px;':''" alt="">
																						</div>
																						<div v-else style="padding:12px;">
																							<a-upload
																								:show-upload-list="false"
																								:data="{n:nv,index:nvs,sub:iv.progractive,uptype:2}"
																								:customRequest="paogrRequest"
																								@change="coverChanges(nv,nvs,$event)">
																							<div class="vediobox" :style="index ==0? 'width:114px;height:100px;' : index ==1 ? 'width:226px;height:68px;': index ==2 ? 'width:226px;height:68px;' :index ==3 ? 'width:206px;height:68px;':index ==4 ? 'width:114px;height:100px;':''">
																								<a-icon :type="ivs.imgloading ? 'loading': 'cloud-upload'" />
																								<p class="upload-area-text" style="font-size:12px;">上传封面</p>
																								<p>(必填)</p>
																							</div>
																							</a-upload>
																							<div class="card-create-button" style="text-align:center;">
																								<a-button @click="metaimage(nv,nvs)" :loading="btnloading">生成/选择封面</a-button>
																							</div>
																						</div>
																					</div>
																				</div>

																				<!-- 图片弹窗 -->
																				<a-modal
																					title=""
																					:visible="ivs.covershow"
																					:confirm-loading="confirmLoading"
																					@ok="coveroks(nv,nvs)"
																					@cancel="handlecovers(nv,nvs)"
																					:width="900"
																					>
																					<div class="material">
																						<a-tabs default-active-key="1" @change="callback">
																							<a-tab-pane key="1" tab="图片素材">
																								<div style="margin-top:12px;height:430px;overflow:auto;">
																									<a-list :grid="{ gutter: 16, column: 4 }" :loading="coverloding" :data-source="ivs.coverlist">
																										<a-list-item slot="renderItem" @click="oncoveractives(nv,nvs,item)" style="cursor:pointer;" :class="[ivs.coveractive ==item ? 'coveractive' :'']"  slot-scope="item">
																											<img :src="item.url" :class="[ivs.coveractive ==item ? 'imgactive' :'']" style="height:290px;" alt="">
																											<!-- <p> -->
																												<!-- <a-radio name="aradio" :value="item.id"></a-radio> -->
																											
																												<div class="activetrues" v-if="ivs.coveractive ==item">
																													<a-icon style="font-size:16px;color:#fff;font-weight:700;" type="check" />
																												</div>
																										</a-list-item>
																									</a-list>
																								</div>
																								<!-- <p>已选择 {{ivs.covernum}}/1:</p> -->
																							</a-tab-pane>
																							<a-tab-pane key="2" tab="本地上传">
																								<a-upload-dragger
																										name="file"
																										:disabled="ivs.covernum ==1"
																										:multiple="true"
																										:data="{n:nv,index:nvs,sub:iv.progractive,uptype:2}"
																										@change="coverChanges(nv,nvs,$event)"
																										:customRequest="modepaogrRequest"
																									>
																									<div v-if="ivs.covernum ==1">
																										<p>已达封面图上传上限{{ivs.covernum}}</p>
																									</div>
																									<div v-else>
																										<p class="ant-upload-drag-icon">
																										<a-icon :type="ivs.imgloading ?'loading' :'cloud-upload'" />
																										</p>
																										<p class="ant-upload-text">
																											将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																										</p>
																										<p class="ant-upload-hint">
																											建议最佳：宽高比9:16，720*1280≤尺寸≤1440*2560，支持JPG、PNG等图片格式
																										</p>
																									</div>
																								</a-upload-dragger>
																							</a-tab-pane>
																						</a-tabs>
																					</div>
																				</a-modal>
																			</div>																		
																		</div>
																	</div>
																	<div class="delectico" @click="removepush(nv,ivs.key,index)" v-if="item.content.addpanel.length > 0"><a-icon type="close" /></div>
																</div>
															</div>					
														</div>
													</div>
												</div>
											</div>
		
											<div style="margin-top:12px;">

													<a-form-item :required="true" :labelCol="{span: 2}" :wrapperCol="{span: 200}">
														<span slot="label">
															创意标题&nbsp;
														</span>
														<div class="form-row mfont">
															<a-space>
																<a-button type="primary" @click="onaddtitle(nv)" :disabled="iv.addtitledis"><a-icon type="plus" /> 创意标题</a-button>
																<span>已选：{{iv.input.length}}/10</span>
															</a-space>
														</div>

														<div class="form-row mfont" v-for="(i,n) in iv.input" :key="n">
															<a-input placeholder="请输入标题或使用系统推荐标题" v-decorator="[
																i.value+nv+n,
																{
																	rules: [],
																	initialValue: i.nametitle,
																}
																]" @change="ontitles(nv,n,$event)" maxLength="30" style="width:430px;" /> <a-icon type="delete" @click="ondeltitle(nv,n)" v-if="n > 0" style="cursor:pointer;margin-left:5px;" />
															<p class="dynamicp">插入动态词包：<a href="javascript:void(0);" @click="ondynamics('{地点}',n,nv,4)">+地点</a><a href="javascript:void(0);" @click="ondynamics('{日期}',n,nv,1727)">+日期</a><a href="javascript:void(0);" @click="ondynamics('{星期}',n,nv,1736)">+星期</a><a href="javascript:void(0);" @click="ondynamics('{年龄}',n,nv,1737)">+年龄</a> <span @click="ondynamicmores(n,nv)" style="cursor:pointer;">更多</span></p>

															<a-modal
																title=""
																:visible="i.dynamicmores"
																:confirm-loading="confirmLoading"
																:width="800"
																:maskClosable="true"
																:footer="null"
																@cancel="handleCancels(n,nv)"
															>
																<a-table :scroll="{ x: 400, y: 300 }" :pagination="pages" :columns="dynamiclabel" :data-source="i.dynamiclists">
																	
																	<div slot="statusDemo" slot-scope="text">
																		<span v-if="text == 'CREATIVE_WORD_STATUS_APPROVE'">
																			审核通过
																		</span>
																		<span v-else-if="text =='CREATIVE_WORD_STATUS_REJECT'">
																			审核失败
																		</span>
																		<span v-else-if="text =='CREATIVE_WORD_STATUS_AUDIT'">
																			新建审核中
																		</span>
																		<span v-else-if="text == 'CREATIVE_WORD_STATUS_REAUDIT'">
																			修改审核中
																		</span>
																	</div>

																	<div slot="action" slot-scope="text">
																		<a href="javascript:void(0);" @click="ondynamics('{'+text+'}',n,nv,text.creative_word_id)">插入</a>
																	</div>

																</a-table>
															</a-modal>
														</div>

													</a-form-item>
												</div>

										</div>
									</div>
									<div :class="[source =='1' ? 'isblock' :'isnone']">
										<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												选择素材&nbsp;
												<!-- <a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip> -->
											</span>
											<div class="form-row">
												<a-button type="primary" @click="choiceorign">选择</a-button>
											</div>
										</a-form-item>


										<a-modal
											title="选择程序化创意包"
											:visible="choiceorignbox"
											:confirm-loading="confirmLoading"
											:width="600"
										>
											<div style="margin-bottom:12px;">
												<a-input-search
													placeholder="请输入"
													enter-button="搜索"
													size="small"
													@search="onchoice"
												/>
											</div>
											<a-table :row-selection="rowchoicelist" bordered style="width:550px;" selections="true" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="choicelabel" :data-source="choicelist">
											</a-table>
										</a-modal>

										<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												创意组件&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<div class="form-row">
												<a-button disabled>选择</a-button>
											</div>
										</a-form-item>
									</div>
									</div>
									</div>
								</div>
					
								<!-- <a-form-item
								style="margin-top:20px;"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
								<span slot="label">
														推广卡片&nbsp;
														<a-tooltip title="What do you want others to call you?">
														<a-icon type="question-circle-o" />
														</a-tooltip>
													</span>

										<div class="product-panel mfont">
											<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
													<span slot="label">
														卡片主图&nbsp;
														<a-tooltip title="What do you want others to call you?">
														<a-icon type="question-circle-o" />
														</a-tooltip>
													</span>
													<div class="form-row">
														<div class="creative-video-card">
															<div class="creative-video-card-wrapper">
																<div class="video-card">
																	<div class="card-create-md" style="width:140px; height:140px;">
																		<div class="videomodel" v-if="cardboximg !=''">
																			<div class="videobtn" style="top:50px;">
																				<a-button size="small" @click="oncardimg" type="primary">更换图片</a-button>
																			</div>
																			<img :src="cardboximg" style="width:100%;height:140px" alt="">

																		</div>
																		<div v-else style="padding:12px;">
																			<a-upload
																			name="avatar"
																			:show-upload-list="false"
																			:customRequest="onuploadcardimg"
																			@change="handleChange">
																				<div class="card-create-upload" style="width:116px;height:73px;margin-bottom:10px;">
																					<p class="upload-area-text"><a-icon type="cloud-upload" /> 上传图片</p><br />
																					<p>(必填)</p>
																				</div>
																			</a-upload>
																			<div class="card-create-button">
																				<a-button @click="oncardimg">素材库</a-button>
																			</div>
																		</div>
																	</div>
																	<p class="card-create-mdp" style="width:200px;">建议尺寸为108*108，大小小于1M。支持JPG、PNG等图片格式</p>
																</div>
															</div>
														</div>
													</div>
												</a-form-item>

												<a-modal
													title=""
													:visible="cardbox"
													:confirm-loading="confirmLoading"
													@ok="cardOk"
													@cancel="cardCancel"
													:width="800"
													>
													<a-tabs default-active-key="1" @change="callback">
														<a-tab-pane key="1" tab="我的图片">
															<a-radio-group v-model="value" @change="onChange">
																<a-radio :style="radioStyle" :value="1">
																	卡片主图
																</a-radio>
															</a-radio-group>
															<div style="text-align:center;">
																<a-empty />
															</div>
															<p>已选择：0/1：</p>
														</a-tab-pane>
														<a-tab-pane key="2" tab="本地上传">
																<a-upload-dragger
																	name="file"
																	:multiple="true"
																	:show-upload-list="false"		
																	:customRequest="onuploadcardimg"
																>
																	<p class="ant-upload-drag-icon">
																	<a-icon type="cloud-upload" />
																	</p>
																	<p class="ant-upload-text">
																		将文件拖到此处，或 <a href="javascript:void(0);">点击上传</a>
																	</p>
																	<p class="ant-upload-hint">
																		建议最佳：宽高比1:1，108*108≤尺寸≤108*108，支持JPG、PNG等图片格式
																	</p>
																</a-upload-dragger>
																<p>已选择：0/10</p>
														</a-tab-pane>
													</a-tabs>

												</a-modal>


												<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
													<span slot="label">
														卡片标题&nbsp;
														<a-tooltip title="What do you want others to call you?">
														<a-icon type="question-circle-o" />
														</a-tooltip>
													</span>
													<div class="form-row mfont">
														<a-input placeholder="请输入卡片标题" v-decorator="[
															'product_description',
														{ rules:[{required: true, message: '请输入卡片标题，卡片标题1-7个字' }],initialValue: cardtitle}
														]" maxLength="7" style="width:430px;" />
														<p>推荐名称：<a href="javascript:void(0);" @click="oncardtitle('海量精彩内容')">+海量精彩内容</a></p>
													</div>
												</a-form-item>

												<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
													<span slot="label">
														推广卖点&nbsp;
														<a-tooltip title="What do you want others to call you?">
														<a-icon type="question-circle-o" />
														</a-tooltip>
													</span>
													<div class="form-row mfont">
														<a-space>
															<a-button type="primary" @click="onpoint" :disabled="btnpoint"><a-icon type="plus" /> 推广卖点</a-button>
						
															<span>已选：{{inputlist.length}}/10</span>
														</a-space>
														<p>当您选择多个卖点时，系统将默认为您开启针对推广卖点的优选投放</p>

														<div v-for="(item, index) in inputlist" :key="index" :value="item">
															<a-input placeholder="添加推广卖点或使用系统推荐卖点" v-decorator="[item.valuename, {  rules: [{ required: true, message: '请输入推广卖点，推广卖点6-9个字' }]}]" maxlength="9" @change="onpoints(index,$event)" style="width:430px;" /><a-icon :class="[index >= 1 ?'isblocks' :'isnone']" @click="ondelinput(index)" style="margin-left:10px;" type="delete" />
														</div>

													</div>
												</a-form-item>


													<a-modal
													title=""
													:visible="systemshow"
													:confirm-loading="confirmLoading"
													@ok="systemok"
													@cancel="systemCancel"
													:width="600"
													>
														<a-table :row-selection="rowsystempoint" bordered style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="systemlabel" :data-source="systemlist">
														</a-table>
													</a-modal>
													
								

												<a-form-item :required="true" :labelCol="{span: 3}" :wrapperCol="{span: 200}">
													<span slot="label">
														行动号召&nbsp;
														<a-tooltip title="What do you want others to call you?">
														<a-icon type="question-circle-o" />
														</a-tooltip>
													</span>
													<div class="form-row mfont">
														<a-radio-group v-decorator="[
														'enable_personal_action',
														{ rules:[],initialValue: 'true'}
														]"
														@change="onactiontext" button-style="solid">
															<a-radio-button value="true">
																开启智能优选
															</a-radio-button>
															<a-radio-button value="false">
																关闭智能优选
															</a-radio-button>
															
														</a-radio-group>
													<p :class="[actiontext =='0' ?'isblock':'isnone']">系统将基于字节领先的技术能力和实时的投放数据，在每次抖音广告显示时，挑选最有利于转化的文案进行显示，帮助您提升转化能力。</p>
														<a-select
															show-search
															placeholder="请选择"
															style="width: 450px;display:block;"
															v-decorator="[
																'call_to_action',
															]"
														>
															<a-select-option v-for="(item) in calllist" :key="item">
																{{ item }}
															</a-select-option>

														</a-select>
														<p :class="[actiontext =='true' ?'isblock':'isnone']">在无法使用智能优选的流量场景下，将使用上方文案展示给用户。</p>
														<p :class="[actiontext =='false' ?'isblock':'isnone']">关闭智能优选后，将对所有用户展示您选择的文案。</p>
													</div>
												</a-form-item>

										</div>

								</a-form-item> -->

								<a-form-item
									style="margin-top:20px;"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<span slot="label">
										来源&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<div class="form-row">
										<a-input placeholder="请输入来源" v-decorator="['source', { rules: [{required:true,message:'请输入来源，来源2-10个字'}] }]" style="width:450px;" maxLength="10" />
									</div>
								</a-form-item>

								<a-form-item
									:label="$t('品牌主页')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<a-radio-group v-decorator="[
										'ies_core_user_id',
										{ rules:[],initialValue: '0'}
									]"
										@change="onbrandhone" button-style="solid">
										<a-radio-button value="0">
											不开启
										</a-radio-button>
										<a-radio-button value="1">
											开启抖音主主页
										</a-radio-button>
										<!-- <span style="margin-left:12px;"><a href="">绑定抖音号，持续助力跑量</a></span> -->

										<div :class="[brandhome ==1?'isblock':'isnone']">
											<p>广告视频将同步到您的主页下，在客户端点击广告头像将进入您的主页</p>
											<a-checkbox v-decorator="['is_feed_and_fav_see',{rules:[]}]">
												主页作品列表隐藏广告内容
											</a-checkbox>
										</div>
									</a-radio-group>
								</a-form-item>

								<a-form-item
									:label="$t('广告头像')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<div class="form-row mfont">
										<div class="avatar-info">
											<div class="imgbox">
												<img :src="avaterimg" alt="">
											</div>
											<div class="avatarfont">
												<p>此头像作为头条、抖音火山版、西瓜和抖音的广告头像展示</p>
												<p class="ad-color-text-hint">取自推广应用的图标</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
								</a-form-item>

								<div v-if="material == 'NONE'">
									<a-form-item
										:label="$t('客户端下载视频')"
										:labelCol="{span: 3}"
										:wrapperCol="{span: 200}"
										:required="true"
									>
										<a-radio-group v-decorator="[
											'is_presented_video',
											{ rules:[],initialValue: '0'}
										]"
											@change="oncomment" button-style="solid">
											<a-radio-button value="0">
												不启用
											</a-radio-button>
											<a-radio-button value="1">
												启用
											</a-radio-button>
										</a-radio-group>
									</a-form-item>

									<a-form-item
										:label="$t('最优创意衍生计划')"
										:labelCol="{span: 3}"
										:wrapperCol="{span: 200}"
									>
										<a-radio-group v-decorator="[
											'generate_derived_ad',
											{ rules:[],initialValue: '0'}
										]"
											@change="oncomment" button-style="solid">
											<a-radio-button value="0">
												不启用
											</a-radio-button>
											<a-radio-button value="1">
												启用
											</a-radio-button>
										</a-radio-group>
									</a-form-item>
								</div>

								<a-form-item
									:label="$t('广告评论')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<a-radio-group v-decorator="[
										'is_comment_disable',
										{ rules:[],initialValue: '0'}
									]"
										@change="oncomment" button-style="solid">
										<a-radio-button value="1">
											关闭
										</a-radio-button>
										<a-radio-button value="0">
											开启
										</a-radio-button>
										<p :class="[comments == '1'? 'isblock' :'isnone']"><a-icon type="exclamation-circle" />抖音暂时不支持关闭广告评论功能</p>
									</a-radio-group>
								</a-form-item>

								<a-form-item
									:label="$t('客户端下载视频')"
									:labelCol="{span: 3}"
									:wrapperCol="{span: 200}"
								>
									<a-radio-group v-decorator="[
										'm',
										{ rules:[],initialValue: '1'}
									]"
										button-style="solid">
										<a-radio-button value="0">
											关闭
										</a-radio-button>
										<a-radio-button value="1">
											开启
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<a-collapse accordion style="background:#fff;border:none;padding:0;">
									<a-collapse-panel key="1" header="显示高级选项" style="border:none;color:Red;">
										<a-form-item
										:label="$t('创意展现')"
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
										:required="true"
									>
										<a-radio-group v-decorator="[
											'creative_display_mode',
											{ rules:[],initialValue: 'CREATIVE_DISPLAY_MODE_RANDOM'}
										]"
											@change="ontoshow" button-style="solid">
											<a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">
												优选模式
											</a-radio-button>
											<a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">
												轮播模式
											</a-radio-button>
											<p :class="[toshow =='CREATIVE_DISPLAY_MODE_CTR'?'isblock':'isnone']">选择优选模式，系统会自动对效果好的创意进行展示量倾斜，创意效果越好展示量越高</p>
											<p :class="[toshow =='CREATIVE_DISPLAY_MODE_RANDOM'?'isblock':'isnone']">使用创意轮播，系统将平分各创意展现机会，便于广告主比较各创意投放效果</p>
										</a-radio-group>
									</a-form-item>
									</a-collapse-panel>
								</a-collapse>
							</div>
						</div>
					</div>

					<div class="borderbox">
						<div class="code-box-demos" id="origin-type">
							<div class="ad-row-title">
								创意分类
							</div>
							<div class="ad-group">
								<a-form-item
									:label="$t('创意分类')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
									:required="true"
								>
									<a-cascader style="width:450px;"  v-decorator="[
						'third_industry_id',
						{
							rules: [
							{ type: 'array', required: true, message: '请选择创意分类' },
							],
						},
						]" :field-names="{ label: 'name', value: 'id', children: 'children' }" :options="typelist" placeholder="请选择" @change="onChange" />
								</a-form-item>

								<a-form-item
										:label="$t('创意标签')"
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
										:required="true"
									>
									<a-input-search
										placeholder="最多20个标签，每个不超过10个字"
										enter-button="添加（回车键）"
										style="width:450px;"
										@search="onlabel"
										:len="10"
										@change="onfontlen"
										v-decorator="[
											'textcn'
										]"
										@keyup.enter="handleAddlabel"
										/>
								</a-form-item>
								
								<div class="mfont" style="width:400px;height:300px;" :class="[labellist.length >0 ?'isblock':'isnone']">
									<a-list :grid="{ gutter: 16, column: 2 }" :split="true" :pagination="false" size="small" :data-source="labellist">
										<a-list-item slot="renderItem" slot-scope="item">
											<p style="border:1px solid #ccc;padding:5px;">{{item}} <span @click="dellabel(item)" style="float:right;cursor:pointer;"><a-icon type="close" /></span></p>
										</a-list-item>
									</a-list>
								</div>

							</div>
						</div>
					</div>

					<div class="borderbox">
						<div class="code-box-demos" id="origin-link">
							<div class="ad-row-title">
								监测链接<span style="font-size:12px;margin-left:12px;color: #333;">自2020年11月17日起，新创建的广告计划“点击监测链接”将升级为“有效触点监测链接”</span>
							</div>
							<div class="ad-group">
								<a-form-item
										:label="$t('展示')"
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
									>
									<a-input style="width:450px;"  v-decorator="['track_url']" placeholder="请输入链接地址" />
								</a-form-item>

								<a-form-item
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
									>
									<span slot="label">
										有效触点&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-input style="width:450px;" v-decorator="['action_track_url']" placeholder="请输入链接地址" />
								</a-form-item>

								<a-form-item
										:label="$t('视频播放')"
										:labelCol="{span: 2}"
										:wrapperCol="{span: 200}"
									>
									<a-input style="width:450px;" v-decorator="['video_play_effective_track_url']" placeholder="请输入链接地址" />
								</a-form-item>

								<a-form-item
									:label="$t('视频播完')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
								>
									<a-input style="width:450px;" v-decorator="['video_play_done_track_url']" placeholder="请输入链接地址" />
								</a-form-item>

								<a-form-item
									:label="$t('视频有效播放')"
									:labelCol="{span: 2}"
									:wrapperCol="{span: 200}"
								>
									<a-input style="width:450px;" v-decorator="['video_play_track_url']" placeholder="请输入链接地址" />
								</a-form-item>
							</div>
						</div>
					</div>
				
					<div class="borderbox">
						<a-button @click="onback">取消创建</a-button>
						<a-modal
							title="操作提示"
							:visible="visible"
							:confirm-loading="confirmLoading"
							@ok="handleOk"
							@cancel="handleCancel"
							>
							<p>将不保存本次创建的所有数据!</p>
						</a-modal>
						<span style="float:right;"><a-button type="primary" :loading="logging" @click="onnext">下一步</a-button></span>
					</div>

			</a-form>
			</a-col>
		</a-row>
	</div>
  </div>
</template>
<script src="./origin.js">

</script>
<style lang="less" scoped>

.example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
}

.creativeSetup-nav{
    padding: 8px 16px;
    line-height: 32px;
	background: #f8f8f9;
	padding-left: 20px;
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    border-bottom: 1px solid #dcdee2;
}

// 视频
.videomodel{
	position: relative;
}

.borderbox{
    border:1px solid #dcdee2;
    padding:16px;
    margin-top:20px;
}

.cardprogra{
	display: inline-block;
	margin-left: 10px;
}

.vediobox{
	text-align:center;padding:10px;
	background-color: #F8F8F8;
	border: 1px dashed #D6D6D6;
	cursor: pointer;
	margin-bottom: 16px;
}

.delectico{
	position:absolute;
	right: -7px;
	top:-10px;
	z-index: 1;
	cursor: pointer;
}

.cardbox{
	margin-right: 16px;
}

.ant-upload.ant-upload-select-picture-card{
	width:auto !important;
	height: auto !important;
}

.videomodel .videobtn{
	position: absolute;
	z-index: 1;
	left: 30px;
	top:50px;
}

.ctt-panel-box .ctt-panel-header .tab-list[data-v-1c2c1da8]{
	max-width: 900px;
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
}

.videoactive{
	position: relative;
	border:1px solid #2F88FF;
	// background: #2F88FF;
}

.videoactive .ant-list-item{
	height: 330px !important;
}

.videoactive video{
	height: 290px;
}

.coveractive{
	position: relative;
	// border:1px solid #2F88FF;
}

.coveractive .ant-list-item{
	height: 300px !important;
	margin-bottom: 0;
}


.imgactive{
	// border:2px solid #2F88FF;
	background: #2F88FF;
}
.videoactive image{
	// width: 180px;
	height: 300px;
}

.activetrues{
	position: absolute;
	z-index: 3;
	top:10px;
	right: 50px;
	background: #2F88FF;
}


.activetrue{
	position: absolute;
	z-index: 3;
	top:10px;
	right: 30px;
	background: #2F88FF;
}

.videoname{
	width: 140px;
	overflow : hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.desc-wrapper{
    position: absolute;
    right: 24px;
    top: 0px;
    height: 364px;
    width: 324px;
    font-family: PingFangSC;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
    z-index: 1;
}

//多个图片类型
.btnmonbox .image-mode{
	display: inline-block;
	box-sizing: border-box;
	display: inline-flex;
    position: relative;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px #eff1fa;
    border-radius: 4px;
    border: 1px solid #DEE4F5;
    padding: 16px;
    margin-left: 8px;
	cursor: pointer;
	line-height: 60px;
}

.ctt-panel-box{
	margin-left: 12px;
	width: 950px;
	display: inline-block;
	border-radius: 4px;
    border: 1px solid #dadfe3;
	min-height: 293px;
	margin-top: 12px;
}

.creative-video-card{
	padding: 16px 24px;
    color: #666;
}

.creative-video-card .creative-video-card-wrapper{
	margin-right: 24px;
	display: inline-block;
}

.creative-video-card-wrapper .video-card .card-create-md{
	position: relative;
    // width: 140px;
    // height: 250px;
    border: 1px solid #DADFE3;
    background-color: #FFF;
    // padding: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.card-create-md .card-create-upload{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // width: 115px;
    // height: 100%;
    border-radius: 4px;
    background-color: #F8F8F8;
    border: 1px dashed #D6D6D6;
	cursor: pointer;
	// height: 116px;
	margin-bottom: 16px;
	text-align: center;
}

.video-card .card-create-mdp{
	// width: 140px;
	font-size: 12px;
    color: #999;
	word-break: break-all;
	line-height: 20px;
}

.card-create-md .card-create-button button{
	width: 114px;
	margin-bottom: 12px;
}

.card-create-md .card-create-upload p{ 
	height: 22px;
    line-height: 22px;
    font-size: 14px;
	color: #666;
}


//右边创意预览
.creative-preview-box{
	width: 256px;
    height: 500px;
    background: #F8F9FA;
	border-radius: 4px;
	position: absolute;
	right: 0;
	top:0;
}

.creative-preview-box .creative-preview{
	padding: 24px;
    height: 442px;
}

.creative-preview-box .creative-preview .title{
	color: #333333;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
}

.preview{
	position: relative;
}

.douyin-bk .oneimg{
	width: 100%;
	position: absolute;
	width: 30px;
    height: 30px;
    line-height: 48px;
    font-size: 24px;
    left: 177px;
    z-index: 3;
    top: 130px;
    border-radius: 50%;
}

.douyin-bk .twoimg{
	position: absolute;
	top: 150px;
    right: 0;
    z-index: 10;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f42c55;
}

.douyin-title{
	position: absolute;
	z-index: 4;
    color: #fff;
    font-size: 15px;
    line-height: 21px;
	top: 270px;
	font-size: 12px;
    left: 10px;
    width: 300px;
}

.dynamicp a{
	margin-left:10px;
}

.dynamicp span{
	margin-left: 20px;
	color:#13c2c2;
}


.container{
    position: absolute;
    bottom: 30px;
    width: 320px;
    left: 16px;
    z-index: 3;
}

.container div img{
	width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px #fff solid;
    display: inline-block;
    background-color: #d6d6d6;
}

.container .cibtauberbutton{
	margin-top: 12px;
}

.container div button{
	height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
}


.form-row-label{
	background: #f9f9f9;
    border: 1px solid #DADFE3;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
    display: inline-block;
    margin: 0 12px 24px;
    text-align: center;
    vertical-align: top;
}

// 推广卡片
.product-panel{
    width: 950px;
    min-height: 500px;
    border-radius: 4px;
    border: 1px solid #dadfe3;
    background-color: #ffffff;
    color: #333333;
    padding: 24px 0px;
}

.avatar-info{
	height: 64px;
    width: 95%;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
}

.avatar-info div{
	float:left;
	margin-left: 12px;
}

.avatar-info div img{
	width: 48px;
	height: 48px;
}

.avatar-info div p {
	line-height: 30px;
	margin: 0;
	font-size: 12px;
}

.avatar-info div .ad-color-text-hint{
	color: #999;
}

.clear{
	clear: both;
}
// .douyin-bk img{

// }
.ant-tabs-tab{
	margin:0 !important;
}

.ctt-panel-box .ctt-panel-header{
	border-bottom: 1px solid #dadfe3;
    padding: 12px 14px 0px 14px;
    overflow: hidden;
}

.ctt-panel-box .ctt-panel-header .tab-list{
	max-width: 780px;
	// float: left;
	display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
}

.ctt-panel-box .ctt-panel-header .tab-list .tab-list-inner{
	font-size: 14px;
    float: left;
    position: relative;
    padding: 7px 8px;
    margin: 0 9px 7px 10px;
    border-radius: 2px;
	cursor: pointer;
	border-right: 1px solid #ccc;
}

.ctt-panel-box .ctt-panel-body{
	min-height: 100px;
    padding: 24px 24px 24px 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-radius: 4px;
}

.ctt-panel-box .ctt-panel-header .tab-list .active{
	color: #2F88FF;
	font-weight: bold;
	
}

//添加创意大盒子
.creative-common-entry{
	float:left;
	width: 88px;
	cursor: pointer;
    height: 165px;
    border-radius: 4px;
	border: 1px solid #dadfe3;
	text-align: center;
	margin-top:12px;
}

//选中的图片类型
.btnmonbox .mode-active{
	border-color: #2F88FF;
	display: inline-flex;
    position: relative;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px #eff1fa;
    border-radius: 4px;
    padding: 16px;
    margin-left: 8px;
    cursor: pointer;
}

 .btnmonbox .mode-active .bui-icon-question-triangle{
	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: -5px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #2F88FF;
    border-top-width: 0;
    border-left-width: 0;
    transform: rotate(45deg);
    box-shadow: 0px 2px 4px 0px #eff1fa;
 }

.ctt-panel-body-empty .panel-box{
	font-size: 14px; height: 36px; line-height: 36px;
	text-align: center;
}

.creative-common-entry .creative-common-entry-1 img{
	width: 84px;
}

.ctt-panel-body-empty{
	display: inline-block;
	width: 950px;
    border-radius: 4px;
    border: 1px solid #dadfe3;
	min-height: 293px;
	margin-left: 12px;
	margin-top: 12px;
}

.ctt-panel-body-empty .creative-none-logo{
	width: 390px;
    height: 136px;
	margin: 0 auto;
	text-align: center;
}

.ctt-panel-body-empty .creative-none-logo img{
	width: 240px;
    height: 136px;
}

.creative-common-entry-2{
    height: 56px;
    border: 1px solid #dadfe3;
    border-radius: 4px;
	cursor: pointer;
	margin-top: 8px;
}

.creative-common-entry-2 img{
    height: 20px;
    margin-top: 8px;
}

.creative-common-entry-2 p{
	color: #999;
	font-size: 12px;
	text-align: center;
}

.creative-common-entry .creative-common-entry-1 .creative-common-entry-1-tx-2{
	font-weight: 400;
    line-height: 18px;
    text-align: center;
    margin: 0 12px;
	color: #999;
	font-size: 12px;
}


.creative-common-entry-1-tx-1 img{
    font-weight: 700 !;
    margin-top: 3px;
    margin-bottom: 4px;
    text-align: center;
	line-height: 17px;
	border: 1px solid #dadfe3;
}

.creative-common-entry .creative-common-entry-1 a{
	display: inline-block;
    line-height: 17px;
    margin: 8px 4px 12px 15px;
}

.ctt-panel-body-empty{
	padding: 44px 0 43px 0;
	box-sizing: border-box;
}

.btnmonbox div img{
	margin-right:10px;
}

.ad-row-title{
	font-size: 22px;
}

.isblock{
  display: block;
}

.isblocks{
  display: inline-block;
}

.isnone{
  display: none;
}

.ad-group{
	padding-left: 20px;
	margin-top: 32px;
	font-size: 14px;
	line-height: 20px;
}

.code-box-demos{
	padding-top:20px;
}

.ant-form-item-control-wrapper{
	display: inline-block !important;
}
.mfont{
  margin-left: 100px;
}
.spanfont{
  color:#2F88FF;
}
</style>
